<template>
  <a-card>
    <a-form>
      <a-form-item label="楼宇名称">
        <a-space>
          <a-input v-model:value="search" placeholder="请输入楼宇名称"></a-input>
          <a-button type="primary" @click="searchByName">查询</a-button>
        </a-space>
      </a-form-item>
      <a-divider />
      <a-button style="margin-bottom: 20px" type="primary" @click="addenterp">添加楼宇</a-button>
      <a-table
        :dataSource="tableData"
        :columns="columns"
        :pagination="{
          total: total,
          current: params.page,
          'show-total': showTotal,
          showQuickJumper: true,
          pageSizeOptions: ['5', '10', '15', '20'],
          pageSize: params.pageSize,
          onChange: changeCurrent,
          'show-size-changer': true
        }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'operation'">
            <a-button type="link" @click="editInfo(record)">编辑</a-button>
            <a-button type="link" v-if="record.status === 1" disabled>删除</a-button>
            <a-popconfirm
              v-else
              title="您确定要删除这题记录吗?"
              @confirm="confirm(e, record.id)"
              ok-text="Yes"
              cancel-text="No"
            >
              <a-button type="link">删除</a-button>
            </a-popconfirm>
          </template>
          <template v-if="column.dataIndex === 'status'">
            <span v-if="record.status === 0">闲置中</span>
            <span v-else>租赁中</span>
          </template>
        </template>
      </a-table>
    </a-form>
  </a-card>
  <a-button></a-button>

  <a-modal
    @cancel="cancleOpert"
    :title="isEdit ? '编辑楼宇' : '添加楼宇'"
    v-model:visible="visible"
    :footer="null"
  >
    <a-form
      ref="formRef"
      :model="operatTable"
      :label-col="{ span: 5 }"
      scrollToFirstError
      layout="vertical"
      @finish="onFinish"
    >
      <a-form-item
        :rules="[{ required: true, message: '楼宇名称不能为空哦帕~!', trigger: 'blur' }]"
        name="name"
        label="楼宇名称"
      >
        <a-input
          v-model:value="operatTable.name"
          size="mini"
          placeholder="请输入楼宇名称"
        ></a-input>
      </a-form-item>
      <a-form-item
        :rules="[{ required: true, message: '楼宇层数不能为空哦帕~!', trigger: 'blur' }]"
        name="floors"
        label="楼宇层数"
      >
        <a-input-number
          size="mini"
          style="width: 100%"
          v-model:value="operatTable.floors"
          placeholder="请输入楼宇层数"
        ></a-input-number>
      </a-form-item>
      <a-form-item
        :rules="[{ required: true, message: '在管面积不能为空哦帕~!', trigger: 'blur' }]"
        name="area"
        label="在管面积"
      >
        <a-input-number
          size="mini"
          style="width: 100%"
          v-model:value="operatTable.area"
          placeholder="请输入在管面积"
        ></a-input-number>
      </a-form-item>
      <a-form-item
        :rules="[{ required: true, message: '物业费不能为空哦帕~!', trigger: 'blur' }]"
        name="propertyFeePrice"
        label="物业费"
      >
        <a-input-number
          v-model:value="operatTable.propertyFeePrice"
          size="mini"
          style="width: 100%"
          placeholder="请输入物业费"
        ></a-input-number>
      </a-form-item>
      <a-form-item style="text-align: center">
        <a-space>
          <a-button html-type="submit" type="primary">确认</a-button>
          <a-button @click="cancleOpert">取消</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
import { reactive, onMounted, ref } from 'vue'
import { getTable, fixTable, addTable, delTableData } from '@/api/user.js'
import { message } from 'ant-design-vue'
const operatTable = reactive({
  area: null,
  name: '',
  floors: null,
  propertyFeePrice: null
})
const search = ref(null)
//表单ref
const formRef = ref(null)
let total = ref(null)
const showTotal = () => {
  return `总共${total.value}条`
}

// @finishFailed="onFinishFailed"

const isEdit = ref(false)
const visible = ref(false)
const params = reactive({
  page: 1,
  pageSize: 10
})
const tableData = ref([])

const getTableData = async () => {
  const res = await getTable(params)
  console.log(res)
  tableData.value = res.data.rows.map((el, index) => ({
    ...el,
    index: (params.page - 1) * params.pageSize + index + 1
  }))
  console.log(res.data.rows)
  total.value = res.data.total
}

onMounted(() => {
  getTableData()
  //    = res.data.rows
})
const confirm = async (e, id) => {
  await delTableData(id)
}
const changeCurrent = async (page, pageSize) => {
  params.page = page
  params.pageSize = pageSize
  await getTableData()
}
const editInfo = (row) => {
  // operatTable.value = row
  isEdit.value = true
  operatTable.name = row.name
  operatTable.area = row.area
  operatTable.propertyFeePrice = row.propertyFeePrice
  operatTable.floors = row.floors
  operatTable.id = row.id
  visible.value = true
}
const cancleOpert = () => {
  formRef.value?.resetFields()
  visible.value = false
}
// const afterClose = () => {
//   formRef.value?.resetFields()
// }
const onFinish = async () => {
  if (isEdit.value) {
    console.log(operatTable)
    await fixTable(operatTable)
    message.success('修改成功')
  } else {
    delete operatTable?.id
    console.log(operatTable)
    await addTable(operatTable)
    message.success('添加成功')
  }
  formRef.value?.resetFields()
  visible.value = false
  getTableData()
}
const searchByName = async () => {
  params.name = search
  params.page = 1
  await getTableData()
  delete params.name
}
const addenterp = () => {
  visible.value = true
  isEdit.value = false
}

const columns = [
  {
    title: '序号',
    dataIndex: 'index'
  },
  {
    title: '楼宇名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '层数',
    dataIndex: 'floors',
    key: 'floors'
  },
  {
    title: '在管面积(㎡)',
    dataIndex: 'area',
    key: 'area'
  },
  {
    title: '物业费(元/㎡)',
    dataIndex: 'propertyFeePrice',
    key: 'propertyFeePrice'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation'
  }
]
</script>
